<template>
  <div class="user-detail">
    <div class="user-detail-top">基本信息</div>
    <div class="user-detail-group">
      <div class="user-icon">
        <span>头像</span>
        <img :src="user_avatar" alt="" />
      </div>
      <div class="user-item">
        <span>手机</span>
        <span>{{ user_phone || "暂无" }}</span>
      </div>
      <div class="user-item">
        <span>ID</span>
        <span>{{ user_id }}</span>
      </div>
      <div class="user-item">
        <span>昵称</span>
        <span>{{ user_nickname || "暂无" }}</span>
      </div>

      <div class="user-item">
        <span>个性签名</span>
        <span>{{ user_sign || "暂无" }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import qs from "qs";
import axios from "axios";
const BASE_URL = "http://127.0.0.1:8886";

export default {
  data() {
    return {
      user_id: "",
      user_sign: "", //签名
      user_nickname: "", //昵称
      user_phone: "", //手机号
      user_avatar_imgUrl: "", //头像
      user_avatar: null,
      user_name: "" //账号
    };
  },
  methods: {
    get_image(
      id //获取jpg
    ) {
      return BASE_URL + "/images/small/" + id + ".jpg";
    },
    getdata() {
      if (window.localStorage.getItem("token").length == 64) {
        axios
          .post(
            BASE_URL + "/user/get_user_info",
            qs.stringify({
              token: window.localStorage.getItem("token"),
              name: this.userInfo.user_nickname,
              sign: this.userInfo.user_sign,
              image_url: this.user_avatar_id
            }),
            { headers: { "Content-Type": "application/x-www-form-urlencoded" } }
          )
          .then(re => {
            console.log(re.data.备注);
            if (re.data.状态码 === 200) {
              this.user_id = re.data.id;
              this.user_phone = re.data.手机号;
              this.user_nickname = re.data.昵称;
              this.user_avatar = this.get_image(re.data.头像);
              this.user_sign = re.data.签名;

              // console.log(this.userInfo.id);
            } else {
            }
          })
          .catch(error => {
            console.log(error);
          });
      }
    }
  },
  mounted() {
    this.getdata();
  },

  computed: {
    ...mapState(["userInfo"])
  }
};
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
.user-detail {
  width: 70%;
  height: 100%;
  margin: 20px auto;

  .user-detail-top {
    width: 100%;
    height: 60px;
    line-height: 60px;
    padding-left: 10px;
    font-weight: bold;
  }

  .user-detail-group {
    .user-icon {
      height: 60px;
      padding: 0 10px;
      background-color: #fff;
      border-bottom: 1px solid #e0e0e0;
      display: flex;
      justify-content: space-between;
      align-items: center;

      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
    }

    .user-item {
      height: 50px;
      padding: 0 10px;
      background-color: #fff;
      border-bottom: 1px solid #e0e0e0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  .right-title-color {
    color: #999;
    font-size: 14px;
  }
}
</style>

